<template>
	<div>
		<h1>用户管理--查询用户</h1>
		<font color="red">{{msg}}</font><br />
		<table border="1" width="98%" align="center">
			<tr>
				<td>用户名</td>
				<td>
					<input type="text" v-model="user.uname"/>
				</td>
			</tr>
			<tr>
				<td>真实姓名</td>
				<td>
					<input type="text" v-model="user.realname"/>
				</td>
			</tr>
			<tr>
				<td colspan="2" align="center">
					<button @click="doQuery()">查询</button>
					<button @click="toAdd()">增加</button>
				</td>
			</tr>
		</table>
		<br />
		<p v-show="list.length==0">没有查询结果</p>
		<table v-show="list.length>0" border="1" width="98%" align="center">
			<tr>
				<th>id</th>
				<th>用户名</th>
				<th>密码</th>
				<th>真实姓名</th>
				<th>出生日期</th>
				<th>操作</th>
			</tr>
			<tr v-for="(u,i) in list">
				<td>{{u.id}}</td>
				<td>{{u.uname}}</td>
				<td>{{u.pass}}</td>
				<td>{{u.realname}}</td>
				<td>{{u.birthdate}}</td>
				<td>
					<a href="#" @click="toUpdate(u)">修改</a>
					&nbsp;&nbsp;
					<a href="#" @click="doDelete(u,i)">删除</a>
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default{
		name:'UserQuery',
		data(){
			return{
				user:{
				    uname:'t',
				    realname:'张',
					act:'selectAll'
					},
				msg:'',
				list:[]
					}
				},
		methods:{
			doQuery(){
				// let url='/UserController';
				let url='/user/selectAll';
				let param=this.$qs.stringify(this.user);
				this.$axios.post(url,param)
				.then((resp)=>{
					this.list =resp.data;
				})
				.catch((err)=>{
					console.log('error=',err);
				})
			},
			toAdd(){
				this.$router.push('/user/add');
			},
			toUpdate(u){
				this.$router.push({
					path:'/user/update',
					query:{user:u}
				})
			},
			doDelete(u,index){
				if(!confirm('你确定要删除本记录吗？')){
					return;
				}
				// let url='/UserController';
				 let url='/user/delete';
				u.act = 'delete';
				let param=this.$qs.stringify(u);
				this.$axios.post(url,param)
				.then((resp)=>{
					let i=resp.data;
					if(i>0){
						this.list.splice(index,1);
					}else{
						this.msg='删除失败';
					}
				})
				.catch((err)=>{
					console.log('error=',err);
				})
			}
		}
	}
</script>
<!-- scoped="scoped"表示当前样式属于局部样式，只在当前组件中有效-->
<style scoped="scoped">
	div{
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
</style>
